<template>
	<div class="orderDetail">
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path: '/home/order'}">美食管理</el-breadcrumb-item>
				<el-breadcrumb-item>订单详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content">
			<div class="od-card">
				<div class="od-first">
					<div class="odc-true"><i class="iconfont">&#xe61a;</i>订单号：{{orderInfo.order_id}}</div>
					<div class="cal-order">
						取消订单
					</div>
				</div>
				<div class="desc" v-if="isloading">
					<div class="odc-paidtime" style="margin-top: 8px;">
						<i class="iconfont">&#xe657;</i>姓名：{{orderInfo.order_owner_name}}</div>
					<div class="odc-createtime" style="margin-top: 8px;">
						<i class="iconfont">&#xe627;</i>创建时间：{{orderInfo.order_create_time}}
					</div>
					<div class="odc-paidtime" style="margin-top: 8px;">
						<i class="iconfont">&#xe6f8;</i>支付时间：{{orderInfo.order_pay_time}}</div>
					<div class="odc-carrier" style="margin-top: 8px;">
						<i class="iconfont">&#xe632;</i>骑手姓名：{{orderInfo.carrier}}</div>
					<div class="odc-tel" style="margin-top: 8px;">
						<i class="iconfont">&#xe625;</i>骑手电话：{{orderInfo.carrier_telephone}}</div>
					<div class="odc-origin" style="margin-top: 8px;">
						<i class="iconfont">&#xe630;</i>原始价格：{{orderInfo.order_original_price}}</div>
					<div class="odc-origin" style="margin-top: 8px;">
						<i class="iconfont">&#xe637;</i>实际价格：{{orderInfo.order_true_price}}</div>
					<div class="odc-address" style="margin-top: 8px;">
						<i class="iconfont">&#xe626;</i>收货人姓名：{{orderInfo.userAddress.receiver_name}}</div>
					<div class="odc-address" style="margin-top: 8px;">
						<i class="iconfont">&#xe64d;</i>收货人电话：{{orderInfo.userAddress.receiver_telephone}}</div>	
					<div class="odc-address" style="margin-top: 8px;">
						<i class="iconfont">&#xe60e;</i>收货地址：{{orderInfo.userAddress.receiver_address}}</div>
					<div class="odc-paidstyle" style="margin-top: 8px;">
						<i class="iconfont">&#xe603;</i>支付方式：{{orderInfo.payStyle.constant_term_meaning}}</div>
					<div class="odc-paidstyle" style="margin-top: 8px;">
						<i class="iconfont">&#xe6b3;</i>订单状态：{{orderInfo.orderState.constant_term_meaning}}</div>
				</div>
			</div>
			<div class="od-food">
				<div class="odf-head">菜品列表</div>
				<div class="odf-table">
					<el-table :data="detailList" style="width:100%;">
						<el-table-column label="菜品图片" width="100">
							<template slot-scope="scope">
								<el-avatar shape="square" :size="60" :src="`http://localhost:8080/res/${scope.row.food.food_img}`" style="margin-left: 10px;margin-right: 10px;"></el-avatar>
							</template>
						</el-table-column>
						<el-table-column prop="food_id" label="菜品ID" width="130">
						</el-table-column>
						<el-table-column prop="food_name" label="菜品名称" width="130">
						</el-table-column>
						<el-table-column prop="food.food_price" label="单价" width="130">
						</el-table-column>
						<el-table-column prop="food_amount" label="菜品数量" width="130">
						</el-table-column>
						<el-table-column prop="detail_attach" label="备注">
						</el-table-column>
						<el-table-column prop="food_total" label="总价" width="180">
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import OrderDetailService from './OrderDetailService.js';
	export default {
		name: 'OrderDetail',
		data() {
			return {
				orderInfo: {},
				detailList: [],
				isloading: false,
			}
		},
		created() {
			OrderDetailService.getDetailService({
				orderid: this.$route.params.order_id
			},res=>{
				console.log(res);
				this.orderInfo = res.orderInfo;
				this.detailList = res.detailList;
				this.isloading = true;
				console.log(this.detailList);
			})
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="less">
	@import '../../../style/Common.less';

	.orderDetail {}

	.orderDetail-content {
		
	}

	.od-card {
		height: 400px;
		margin-top: 20px;
		box-shadow: 0 2px 2px 0 rgba(96, 98, 102, 0.1);
		background-color: #F2F6FC;

		.od-first{
			display: flex;
			margin: 0 20px;
			padding-top: 10px;
			justify-content: space-between;
			
			.odc-true {
				font-family: "Helvetica Neue";
				font-size: 18px;
				color: #303133; //字体颜色
				font-weight: 400; //加粗
				letter-spacing: .1em;
			}
			
			.cal-order{
				cursor: pointer;
				&:hover{
					color: orangered;
				}
			}
		}

		.desc {
			margin: 10px 20px;
			font-family: "Helvetica Neue";
			font-size: 14px;
			color: #909399; //字体颜色
			font-weight: 400; //加粗
			letter-spacing: .4em;
		}

	}

	.od-food {
		margin-top: 20px;
		padding: 20px;
		background-color: #F2F6FC;

		.odf-head {
			font-family: "Helvetica Neue";
			font-size: 22px;
			line-height: 24px;
			color: #606266; //字体颜色
			font-weight: 400; //加粗
			letter-spacing: .1em;
		}

		.odf-table {
			margin-top: 20px;
		}
	}
</style>
